<template>
	<!-- 效果图 -->
	<view class="rendering-box">
		<!-- <image class="b-img" :src="firstPagePic"></image> -->
		<view class="img-info-box">
			<uni-swiper-dot :info="detailInfo.renderingImages" :current="current" field="content" :mode="mode" :selectedBackgroundColor="'#666666'">
				<swiper class="swiper-box" @change="swiperChange">
					<swiper-item v-for="(item ,index) in detailInfo.renderingImages" :key="index">
						<view class="swiper-item">
							<image class="sw-img" :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="desc">
				{{detailInfo.describ || ''}}
			</view>
		</view>
		<view class="list-box">
			<view class="item" v-for="(i,index) in listData" :key="index">
				<image class="img" :src="i"></image>
				<!-- <view class="close">
					<image class="close-img" src="../../static/close.png" @tap="listDel(i,index)"></image>
				</view> -->
			</view>
			<!-- <view class="item add" @tap="goAdd()" v-show="listData.length <10">
				<image class="add-img" src="../../static/add_bnt.png"></image>
			</view> -->
		</view>
		<view class="f-bnt" v-if="false">
			<!-- <view class="l cc" v-if="detailInfo.userIsCollect == 1">
				已收藏
			</view>
			<view class="l" @tap="sc" v-if="detailInfo.userIsCollect == 2">
				收藏
			</view> -->
			<view class="r news-bnt" @tap="openSet">
				下单
				<!-- 下单逻辑 下单要判断用户有没有点过收藏，不然就要提醒他先收藏 -->
				<!-- 点收藏我给你返回subjectId 下单的时候你判断是否有subjectId -->
			</view>
		</view>
		<!--视频教程detailInfo.isShow == 1-->
		<view class="video-boxs" v-if="isVideoShow">
			<view class="title">
				视频教程
			</view>
			<view class="video-item">
				<video class="video" id="video1" :src="detailInfo.subjectVideo" :poster="detailInfo.fristPageUrl" @play="playVideo" show-fullscreen-btn controls object-fit="cover"></video>
			</view>
		</view>
		<!--制作素材-->
		<view class="resource-boxs" v-if="isVideoShow">
			<view class="title">
				图文教程
			</view>
			<view class="resource-info-list">
				<view class="item" v-for="(i,index) in graphicTutorial" :key="index">
					<image class="img" :src="i" mode="aspectFill"></image>
					<view class="desc">
						<!-- <view class="name">
							{{i.productName}}
						</view> -->
						<!-- <view class="price">
							¥{{i.price}}
						</view> -->
					</view>
					<!-- <view class="add_cart" @tap="addCart(i.id,i,index)">
						<image src="../../static/addr.png" v-show="!i.ids.includes(i.id)" mode=""></image>
						<image src="../../static/check-pay.png" v-show="i.ids.includes(i.id)" mode=""></image>
					</view> -->
				</view>
			</view>
		</view>
		<view class="" v-if="!isIOS">
			<view class="f-bnt" v-if="!isVideoShow">
				<view class="r news-bnt" @tap="getVal(1)">
					下单
					<!-- openSet下单逻辑 下单要判断用户有没有点过收藏，不然就要提醒他先收藏 -->
					<!-- 点收藏我给你返回subjectId 下单的时候你判断是否有subjectId -->
				</view>
			</view>
		</view>
		<view class="is-ios" v-else>
			政策原因，IOS用户不支持线上支付，请联系客服
			<view class="f-bnt">
				<view class="r news-bnt" @tap="getTell">
					在线客服
				</view>
			</view>
		</view>
		<!--购物车列表-->
		<!-- <CartList ref="cart" :fixed="false" @EventGoPay="eventGoPay" @EventDelCart="eventDelCart"/> -->
		<uni-popup ref="popupOrder" type="bottom">
			<view class="p-content">
				<view class="txt" @tap="getVal(1)">
					现场自行制作
				</view>
				<view class="txt" @tap="getVal(2)">
					我们帮您制作
				</view>
				<view class="txt c" @tap="close()">
					取消
				</view>
			</view>
		</uni-popup>
		<!--图库还是相册-->
		<uni-popup ref="popupImgs" type="bottom">
			<view class="p-content">
				<view class="txt" @tap="getImgs(1)">
					手机相册
				</view>
				<view class="txt" @tap="getImgs(2)">
					图库图案
				</view>
				<view class="txt c" @tap="getImgs(3)">
					取消
				</view>
			</view>
		</uni-popup>
		
		<!--确认下单弹窗(选指甲类型和大小)-->
		<uni-popup ref="popupSize" type="bottom" :is-mask-click="false">
			<TypeSize v-if="tsShow" @saveValue="saveValue"/>
		</uni-popup>
		<!--自定义弹窗-->
		<show-modal :show="isShowModal" 
			@close="closeModal" 
			:title="modalTitle" 
			:content="modalContent"
			:cancelText="modalCancelText"
			:confirmText="modalConfirmText"
			@cancel="bindBtn('cancel')" 
			@confirm="bindBtn('confirm')">
		</show-modal>
		<!--购物车-->
		<!-- <view class="show-cart" v-if="totalNum">
			<view class="cart-cont" @tap="goGoodsDetail">
				<image class="img" src="../../static/shopping-cart.png" mode=""></image>
				<view class="cart-cont-num">
					{{totalNum}}
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import TypeSize from '@/components/typeSize'
	import ShowModal from "@/components/showModal.vue"
	import {getShowDetail,getQueryElementByShowId,getQueryGoodsInfo,getQuerySubjectGoodsList} from "@/api/buyer.js"
	import { getQuerySubjectInfo,userCollectSubject,addUserAddr,getUserAddr,verfiyCode, getHasSubject } from '@/api/user.js'
	import {getAddCart,getCartList} from '@/api/goods.js'
	import CartList from '../cartBox/cartBox.vue'
	export default {
		components:{
			TypeSize,
			ShowModal,
			CartList
		},
		data() {
			return {
				current: 0,
				mode: 'default',
				index: 1,
				array: ['直接打印指甲','打印到甲片'],
				listData: [],
				localDada: [],
				def: {},
				isCollectSubject: false,
				tsShow: false,
				isShowModal: false,
				modalTitle: '温馨提示',
				modalContent: '',
				modalCancelText: '取消',
				modalConfirmText: '确定',
				isModalType: '',
				defInfo: '',
				firstPagePic: '',
				detailInfo: {},
				orderElementPic: [],
				subjectId: '',
				def: {},
				detialInfo: {},
				params: {
					orderOrigin: 1,
					subjectId: '',
					showId: ''
				},
				diyUrl: [],
				resourceList: [],
				totalNum: '',
				isVideoShow: false,
				graphicTutorial: [],
				isIOS: false
			};
		},
		onShow() {
			// this.getCartList()
		},
		beforeDestroy () {
		    uni.$off('updateData');
		},
		onLoad(ops) {
			let that = this;
			uni.getSystemInfo({
				success:function(res){
					console.log("环境")
					console.log(res.platform)
					if(res.platform == "ios"){
						that.isIOS = true
					}
				}
			 });
			console.log(ops)
			uni.$on('updateData',(params) =>{
				console.log('监听到事件来自 updateData ，携带参数为：' + JSON.stringify(params));
				// this.isCollectSubject = false
				this.setImgs(params)
				return
			})
			this.setImgs()
			this.def = ops
			this.defInfo = ops
			this.getDetail()
			this.getQueryGoodsInfoFn()
			this.getHasSubjectFun()
		},
		methods: {
			getHasSubjectFun() {
				getHasSubject({subjectId: this.def.id}).then((res) => {
					console.log(res,'0000')
					this.isVideoShow = res
				})
			},
			eventGoPay(obj) {
				this.goPay(obj.cartListData)
			},
			eventDelCart(id) {
				let index = this.resourceList.findIndex(ele => ele.id == id)
				let arr = this.resourceList[index].ids
				if(arr.includes(id)){
					let index = arr.indexOf(id); // 判断数组中是否有选中的id,如果有则去掉
					if(index > -1){
						arr.splice(index,1)
					}
				}else{}
			},
			playVideo(event){
				
			},
			getCartList(){
				getCartList({}).then((res) => {
					this.totalNum = res.count
				})
			},
			// 加入购物车
			addCart(id,item,inx){
				let arr = this.resourceList[inx].ids
				if(arr.includes(id)){
					let index = arr.indexOf(id); // 判断数组中是否有选中的id,如果有则去掉
					if(index > -1){
						// arr.splice(index,1)
					}
				}else{
				   console.log('加入购物车')
				   this.resourceList[inx].ids.push(id)
				  //  getAddCart({count:1, goodsId: id}).then((res) => {
					 //    this.getCartList()
						// this.$nextTick(() => {
						// 	this.$refs.cart.init(id)
						// })
				  //  })
				}
			},
			change(data) {
				this.txt = data.data ? data.data.join('-') : ''
			},
			goGoodsDetail() {
				let ids = this.resourceList.filter(ele => ele.ids.length)
				let id = ids.length ? ids[0].id : this.resourceList[0].id
				console.log(ids,'-',id)
				uni.navigateTo({
					url: '/pagesA/goods/goodsDetail?id=' + id
				})
			},
			// 商品信息
			getQueryGoodsInfoFn() {
				getQueryGoodsInfo().then((res) => {
					this.params.id = res.id
				})
			},
			// 素材消息
			getQuerySubjectGoodsListFn() {
				getQuerySubjectGoodsList({subjectId:this.detailInfo.id}).then((res) => {
					let resourceList = res
					resourceList.map((item) => {
						item.ids = []
					})
					this.resourceList = resourceList
					if(resourceList.length) {
						// this.$nextTick(() => {
						// 	this.$refs.cart.init(resourceList[0].id)
						// })
					}
				})
			},
			// 选中后返回数据
			setImgs(obj){
				let dataImgs = uni.getStorageSync('selectedImgsList') || []
				let arr = []
				let ids = []
				// this.listData = []
				// this.listData = Array.from(new Set([...this.listData,...dataImgs]))
				dataImgs.forEach(ele => {
					let groupImgs = ele.groupImgs
					let groupIds = ele.groupIds
					groupImgs.forEach(c => {
						arr.push(c)
					})
					groupIds.forEach(id => {
						ids.push(id)
					})
				})
				console.log('选中的图案',dataImgs,ids,arr)
				this.listData = Array.from(new Set([...this.listData,...arr]))
				this.orderElementPic = Array.from(new Set([...this.orderElementPic,...ids]))
				// this.listData = [...this.listData,...arr]
				// this.orderElementPic = [...this.orderElementPic,...ids]
				this.localDada = dataImgs
				
				if(obj && obj.flag) {
					this.openOrder()
				}
			},
			bindPickerChange(e){
				console.log(e)
			},
			// 删除选择的图片
			listDel(url,inx){
				this.listData.splice(inx,1)
				this.orderElementPic.splice(inx,1)
				let dataImgs = this.localDada
				dataImgs.forEach(ele => {
					let groupImgs = ele.groupImgs
					let groupIds = ele.groupIds
					let index = groupImgs.indexOf(url); // 判断数组中是否有选中的id,如果有则去掉
					if(index > -1){
						groupImgs.splice(index,1)
						groupIds.splice(index,1)
					}
				})
				// 删除
				this.diyUrl = this.diyUrl.filter(el => el != url)
				uni.setStorageSync('diyUrlList',this.diyUrl)
				uni.setStorageSync('selectedImgsList',dataImgs)
			},
			goAdd(){
				if(this.listData.length >=10){
					const _this = this
					this.isModalType = 1
					this.isShowModal = true
					// this.modalTitle = '温馨提示'
					this.modalContent = '您好，您的手指位置选择已满，已经可以下单啦'
					this.modalCancelText = '查看'
					this.modalConfirmText = '下单'
					return
				}
				
				this.$refs.popupImgs.open('bottom')
				return
				uni.navigateTo({
					url: '/pagesC/buyer/add?len=' + this.listData.length
				})
			},
			getImgs(t) {
				this.$refs.popupImgs.close()
				if(t == 1) {
					let that = this;
					setTimeout(() => {
						uni.chooseMedia({
							// count: 1, // 默认9
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
							success: function(res) {
								uni.showLoading({
									title: '图片上传中...'
								})
								res.tempFiles.forEach((ele) => {
									console.log(ele)
									that.uploadPhoto(ele.tempFilePath);
								})
							}
						});
					},600)
				}
				if(t == 2) {
					uni.navigateTo({
						url: '/pagesC/buyer/add?len=' + this.listData.length
					})
				}
			},
			uploadPhoto(tempFilePaths) {
				const that = this
				let token = uni.getStorageSync('token') || ""
				uni.uploadFile({
					url: uni.$baseUrl + '/nailVideo/upload', //开发者服务器 url
					header:{
						// HTTP 请求 Header, header 中不能设置 Referer
						'X-Access-Token': token
					},
					// files: that.imgList,
					filePath: tempFilePaths,//tempFilePaths[0].tempFilePath, // 要上传文件资源的路径
					name: 'pictures', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
						dir: 'diy'
					},
					success(res) {
						let data = res.data ? JSON.parse(res.data) : {}
						console.log('上传成功~~~~', data.result);
						that.diyUrl.push(data.result)
						that.listData.push(data.result)
					},
					fail(err) {
						console.log('失败', err);
						uni.hideLoading();
					},
					complete() {
						console.log('结束');
						uni.hideLoading();
					},
				})
			},
			type(item){
				this.ckIndex = item.id
				// this.getNailSizeFn()
			},
			size(i,index){
				this.sIndex = index
			},
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popupSize.open('bottom')
				this.tsShow = true
				this.$refs.popupOrder.close()
			},
			close() {
				this.$refs.popupOrder.close()
			},
			openOrder() {
				this.$refs.popupOrder.open('bottom')
			},
			
			getVal(t) {
				if(t==1){
					// 去支付
					let payObj = {
						id: this.def.id,
						describ: this.detailInfo.describ,
						unitPrice: this.detailInfo.unitPrice || 3,
						orderElementPic: this.orderElementPic,
						fristPageUrl: this.firstPagePic,
						orderElementPic: this.orderElementPic,
						subjectId: this.subjectId,
						showId: this.def.showId,
						orderOrigin: 1
					}
					uni.setStorageSync('payPrintObj',payObj)
					uni.setStorageSync('diyUrlList',this.diyUrl)
					uni.setStorageSync('orderElementPicLen',this.listData.length)
					this.$refs.popupImgs.close()
					uni.navigateTo({
						url: '/pagesB/pay/printOrderPay?payType=10&id=' + this.detailInfo.id
					})
				}
				if(t==2){
					this.open()
				}
			},
			// 下单
			openSet() {
				if(!this.isCollectSubject){
					this.isModalType = 2
					this.isShowModal = true
					// this.modalTitle = '温馨提示'
					this.modalContent = '您好，先收藏后才可下单'
					this.modalCancelText = '取消'
					this.modalConfirmText = '确定'
					return
				}
				this.isShowModal = false
				this.$refs.popupOrder.open('bottom')
			},
			sc(){
				userCollectSubject({subjectId:this.detailInfo.id,subjectName:this.detailInfo.describ}).then((res) => {
					uni.showToast({title: '收藏成功',icon:""});
					this.isCollectSubject = true
					this.subjectId = res
					this.detailInfo.userIsCollect = 1
				})
			},
			// 回调
			saveValue(obj){
				console.log('关闭回调',obj)
				if(!obj) {
					this.$refs.popupSize.close()
					return
				}
				
				this.params.subjectId = this.subjectId
				this.params.showId = this.def.id
				this.params.orderOrigin = this.def.orderOrigin
				this.params.addrId = obj.addrId
				uni.setStorageSync('diyUrlList',this.diyUrl)
				uni.setStorageSync('orderElementPicLen',this.listData.length)
				this.$refs.popupSize.close()
				this.$refs.popupImgs.close()
				
				console.log(this.params,'this.params')
				
				uni.navigateTo({
					url: '/pagesB/pay/goodsOrderPay?info=' + encodeURIComponent(JSON.stringify(this.params))
				})
			},
			bindBtn(type){
				console.log(type,'0')
				if(this.isModalType == 1 && type == "confirm") {
					this.openSet()
				}else{
					this.isShowModal = false
				}
			},
			closeModal(){
				this.isShowModal = false
			},
			getDetail(){
				getQuerySubjectInfo({id:this.defInfo.id}).then((res) => {
					this.firstPagePic = res.fristPageUrl
					this.detailInfo = res
					// this.subjectId = res.subjectId
					this.subjectId = this.detailInfo.id
					this.isCollectSubject = true
					this.detailInfo.elementsImages = res.elementsImages ? res.elementsImages.split(',') : []
					this.detailInfo.renderingImages = res.renderingImages ? res.renderingImages.split(',') : [],
					this.graphicTutorial = res.graphicTutorial ? res.graphicTutorial.split(',') : []
					let arr = res.elementsImagesList
					let ids = []
					let imgs = []
					arr.forEach(ele => {
						ids.push(ele.id)
						imgs.push(ele.url)
					})
					this.listData = Array.from(new Set([...this.listData,...imgs]))
					this.orderElementPic = Array.from(new Set([...this.orderElementPic,...ids]))
					// this.getQuerySubjectGoodsListFn()
					
				})
			},
			swiperChange(e) {
				console.log(e)
				this.current = e.detail.current
			},
			getTell() {
				uni.navigateTo({
					url: "/pagesB/tell/list"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.rendering-box{
	margin: 0 32rpx;
	padding-top: 32rpx;
	padding-bottom: 135rpx;
	.b-img{
		width: 686rpx;
		height: 686rpx;
		border-radius: 40rpx;
	}
	.list-box{
		display: flex;
		flex-flow: wrap;
		margin-top: 30rpx;
		.item{
			width: 20%;
			height: 166rpx;
			text-align: center;
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}
		.add{
			font-size: 28rpx;
			color: #666;
			.box{
				width: 90rpx;
				height: 166rpx;
				margin: 0 auto;
				line-height: 182.8rpx;
				border-radius: 48rpx;
				background: #F2DEE9;
				border: 1rpx solid #E4919D;
				text-align: center;
			}
			.add-img{
				// width: 48rpx;
				// height: 48rpx;
				width: 90rpx;
				height: 166rpx;
				border-radius: 25rpx;
			}
			.close{
				width: 90rpx;
				margin: 0 auto;
				margin-top: 5rpx;
			}
		}
		.img{
			width: 90rpx;
			height: 166rpx;
			border-radius: 25rpx;
		}
		.close-img{
			width: 32rpx;
			height: 32rpx;
		}
		.close{
			
		}
	}
	.video-boxs{
		.title{
			margin-bottom: 18rpx;
		}
		.video-item{
			video{
				width: 100%;
			}
		}
		margin-bottom: 20rpx;
	}
	.resource-boxs{
		.title{
			margin-bottom: 18rpx;
		}
		margin-bottom: 20rpx;
		.resource-info-list{
			padding-top: 10rpx;
			.item{
				// width: 147rpx;
				// height: 240rpx;
				// height: 200rpx;
				border-radius: 8rpx;
				// background: #FFFFFF;
				font-size: 28rpx;
				color: #333;
				margin: 0 13rpx;
				margin-bottom: 52rpx;
				// display: inline-block;
				// overflow: hidden;
				// overtical-align: top;
				position: relative;
				.img{
					// width: 147rpx;
					// height: 130rpx;
					width: 100%;
					height: 330rpx;
					border-radius: 8rpx 8rpx 0px 0px;
				}
				.desc{
					margin: 0 16rpx;
					margin-top: 5rpx;
					.name{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						word-wrap: break-word;
						-webkit-hyphens: auto;
						hyphens: auto;
						padding: 15rpx 0;
					}
				}
				.price{
					color: #E4919D;
					font-size: 26rpx;
					margin-top: 15rpx;
				}
			}
			.nmr{
				margin-right: 0;
			}
			.add_cart{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				bottom: 10rpx;
				right: 5rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	.bnt{
		width: 90%;
		position: fixed;
		left: 50%;
		bottom: 52rpx;
		margin-left: -45%;
		border-radius: 50rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #E4919D;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		margin-top: 114rpx;
	}
}
.f-bnt{
	margin: 32rpx 0;
	margin-bottom: 55rpx;
	// position: fixed;
	bottom: 45rpx;
	width: 93%;
	left: 0;
	// background-color: #f3ecef;
	z-index: 9;
	.l,.r{
		width: 44%;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #E4919D;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #E4919D;
		text-align: center;
		line-height: 88rpx;
		display: inline-block;
	}
	.l{
		margin-right: 5%;
		background-color: #f3ecef
	}
	.r{
		background: #E4919D;
		color: #fff;
		margin-left: 5%;
	}
	.news-bnt{
		width: 95%;
	}
	.cc{
		border-color: #ccc;
		color: #999;
	}
}
.img-info-box{
	image{
		border-radius: 40rpx;
		width: 686rpx;
		height: 686rpx;
	}
	.desc{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 60rpx;
	}
}
.swiper-box{
	height: 686rpx;
}

.show-cart{
	position: fixed;
	top: 50%;
	right: 0;
	width: 80rpx;
	height: 80rpx;
	background-color: #FFFFFF;
	border: 1rpx solid #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 80rpx;
	.img{
		width: 60rpx;
		height: 60rpx;
		position: relative;
		top: 10rpx;
	}
	.cart-cont{
		position: relative;
	}
	.cart-cont-num{
		position: absolute;
		top: -10rpx;
		right: 0;
		color: #E4919D;
		background-color: #fff;
		border: 3rpx solid #E4919D;
		border-radius: 25rpx;
		display: inline-block;
		width: 36rpx;
		height: 22rpx;
		line-height: 22rpx;
		padding: 2px;
		text-align: center;
		font-size: 22rpx;
	}
}
.is-ios{
	text-align: center;
	margin-top: 45rpx;
	.f-bnt{
		margin: 0 auto;
		margin-top: 65rpx;
		width: 240rpx;
		.r{
			border-radius: 20rpx;
			height: 66rpx;
			line-height: 66rpx;
			margin-left: 0;
		}
	}
}
</style>
